#include("../common/_layout.html")
#include("../common/_navbar.html")
#@layout()

#define content()
	#@navbar("detail")
	<div class="container">
		<h1>一览</h1>
		<button class="btn btn-primary" id="servent">角色</button>
		<button class="btn btn-primary" id="craft">符卡</button>
		<div class="table-responsive mainTable">
			<table class="table table-sm table-hover table-bordered" id="resultTable">
				<caption>{{ title }}</caption>
				<thead>
					<tr>
						<td>名称</td>
						<td>稀有度</td>
						<td>等级</td>
						<template v-if="type === 'servent'">
						<td>职阶</td>
						<td>ATK</td>
						<td>HP</td>
						</template>
					</tr>
				</thead>
				<tbody>
					<tr v-for="card in cards" v-bind:class="[card.rareColorClass]">
						<td>{{ card.name }}</td>
						<td class='starColor'>{{ card.rareSHOW }}</td>
						<td>{{ card.level }}</td>
						<template v-if="type === 'servent'">
						<td>{{ card.className }}</td>
						<td>{{ card.atk }}</td>
						<td>{{ card.health }}</td>
						</template>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#resultTable',
		  data: {
			  title: '',
			  type: '',
			  cards:[]
		  }
		});
		$("#servent").click(function(){
			$("#resultTable").hide();
			$.post("#(homeurl ??)/detail/loadServent",function(data){
				app.cards = [];
				app.title = "角色";
				app.type = "servent";
				for(var i=0;i<data.length;i++){
					var row = data[i];
					var info = DATA_DB["servent"][row.sid];
					var card = {};
					card.rareColorClass = "rareColor"+info.rare;
					card.name = info.name;
					card.rareSHOW = rareSHOW[info.rare];
					card.level = row.level;
					card.className = DATA_DB["class"][info.type];
					card.atk = info.atk+row.level*info.atkRate;
					card.health = info.health+row.level*info.healthRate;
					app.cards.push(card);
				}
				$("#resultTable").show();
			});
			
			return false;
		});
		$("#craft").click(function(){
			$("#resultTable").hide();
			$.post("#(homeurl ??)/detail/loadCraft",function(data){
				app.cards = [];
				app.title = "符卡";
				app.type = "craft";
				for(var i=0;i<data.length;i++){
					var row = data[i];
					var info = DATA_DB["craft"][row.sid];
					var card = {};
					card.rareColorClass = "rareColor"+info.rare;
					card.name = info.name;
					card.rareSHOW = rareSHOW[info.rare];
					card.level = row.level;
					app.cards.push(card);
				}
				$("#resultTable").show();
			});
			
			return false;
		});
		var rareSHOW={"1":"★","2":"★★","3":"★★★","4":"★★★★","5":"★★★★★"};
	</script>
	<script src="#(homeurl ??)/js/db.js"></script>
#end

#define css()
<style type="text/css">
    .mainTable {
        margin-top: 5px;
    }
</style>
#end